<template>
  <div class="config-announcement c-f">
    <template v-if="permission">
      <div class="fr ac mb-20">
        <h2 class="title f1">公告列表</h2>
        <div class="f-14 a link" @click="$router.push('/config/announcement/edit')">创建<i class="el-icon-arrow-right b ml-5"></i></div>
        <a class="f-14 a link ml-20" :href="`/api/tnotice/batchexport?userid=${$store.state.user.userid}`">导出<i class="el-icon-arrow-right b ml-5"></i></a>
      </div>
      <div class="fr ac search-bar mb-20">
        <div class="fr ac item">
          <div class="label f-14">公告ID</div>
          <el-input v-model="params.noticeid"/>
        </div>
        <div class="fr ac item">
          <div class="label f-14">标题</div>
          <el-input v-model="params.noticetitle"/>
        </div>
        <div class="fr ac item">
          <div class="label f-14">编辑人</div>
          <el-input v-model="params.editor"/>
        </div>
        <div class="fr ac item">
          <div class="label f-14">时间</div>
          <el-date-picker v-model="params.releasetime" value-format="yyyy-MM-dd"/>
        </div>
        <el-button type="primary" icon="el-icon-search" @click="getList(1)">搜索</el-button>
      </div>
      <div class="list" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <table>
          <thead>
          <th>公告ID</th>
          <th colspan="3">标题</th>
          <th>编辑人</th>
          <th colspan="2">发布时间</th>
          <th colspan="2">操作</th>
          </thead>
          <tbody>
          <tr v-for="item in list" :key="item.nid">
            <td>{{item.noticeid}}</td>
            <td colspan="3">{{item.noticetitle}}</td>
            <td>{{item.editor}}</td>
            <td colspan="2">{{item.releasetime}}</td>
            <td colspan="2">
              <span @click="$router.push(`/config/announcement/edit/${item.noticeid}`)">编辑</span>
              <span @click="remove(item)">删除</span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="tc mt-30 page">
        <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :pager-count="5" :total="total" :current-page="current" @current-change="getList"/>
      </div>
    </template>
    <div v-else class="card fajc">
      <no-right/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'config-announcement',
    data () {
      return {
        loading: false,
        list: [],
        total: 0,
        current: 1,
        params: {
          noticeid: '',
          noticetitle: '',
          editor: '',
          releasetime: ''
        }
      }
    },
    computed: {
      permission () {
        const { roleid } = this.$store.state
        return [1001].includes(roleid)
      }
    },
    methods: {
      getList (current) {
        this.loading = true
        if (current) this.current = current
        this.$http('/tnotice/fuzzyquery/page', {
          userid: this.$store.state.user.userid,
          pagesize: 10,
          pagecurrent: this.current,
          ...this.params
        }).then(
          res => {
            this.list = res.data.records || []
            this.total = res.data.total
            this.loading = false
          }
        )
      },
      remove ({ nid }) {
        nid += ''
        this.$confirm('你确定要删除这篇文章吗？', '提示', { closeOnClickModal: false, center: true, customClass: 'custom' }).then(
          () => {
            this.loading = true
            return this.$http('tnotice/delete', { nid })
          }
        ).then(
          res => {
            this.$notify({
              title: '成功',
              message: `删除成功`,
              type: 'success'
            })
            this.getList(1)
          }
        ).catch(() => {})
      }
    },
    created () {
      if (!this.permission) return
      this.getList()
    }
  }
</script>

<style lang="less">
.config-announcement {
  .search-bar {white-space: nowrap;
    .item {margin-right: 25px;}
    .label {margin-right: 25px;color: rgba(255, 255, 255, .8);}
  }
  .list {padding: 0 20px;background-color: #000418;
    table {table-layout: fixed;width: 100%;}
    th, td {padding: 20px 24px;font-size: 14px;border: 2px solid rgba(243, 246, 250, .2);
      &:first-child {border-left: 0;}
      &:last-child {border-right: 0;
        span {cursor: pointer;color: #2a36e0;}
        span + span {margin-left: 30px;}
      }
    }
    tr:last-child td {border-bottom: 0;}
    th {border-top: 0;
      color: rgba(255, 255, 255, .8);}
    td {text-align: center;}
  }
}
</style>
